<template>
    <canvas id="renderCanvas"></canvas>
</template>

<script>
import vb from 'vue-babylonjs'

export default {
  name: 'box',
  data () {
    return {}
  },
  created () {
  },
  methods: {
    createDefaultEngine (canvas) {
      return new vb.BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
    },
    createScene (canvas, engine) {
      var scene = new vb.BABYLON.Scene(engine)

      // Add a camera to the scene and attach it to the canvas
      /*
      * name: string 定义摄像机的名称
      * alpha: number 定义摄像机沿对数轴的旋转
      * beta: number 定义摄像机沿纬度轴的旋转
      * radius: number 定义相机到目标的距离
      * target: Vector3 定义相机目标
      * scene: Scene 定义相机所属的场景
      */
      var camera = new vb.BABYLON.ArcRotateCamera('Camera', 3 * Math.PI / 4, Math.PI / 4, 10, vb.BABYLON.Vector3.Zero(), scene)
      camera.attachControl(canvas, true)

      // Add lights to the scene
      let light1 = new vb.BABYLON.HemisphericLight('light1', new vb.BABYLON.Vector3(1, 1, 0), scene)
      let light2 = new vb.BABYLON.PointLight('light2', new vb.BABYLON.Vector3(0, 1, -1), scene)

      // Add and manipulate meshes in the scene
      // 方的
      // height 高度（数字 高度尺寸, 覆盖尺寸属性 尺寸
      // width 宽度（数字）宽度大小，覆盖大小属性 尺寸
      // depth 深度（数字）深度大小，覆盖大小属性  尺寸

      let box = vb.BABYLON.MeshBuilder.CreateBox('box', { height: 1, width: 1, depth: 1 }, scene)

      console.log(box)
      return scene
    }
  },
  mounted () {
    let engine
    let scene
    let sceneToRender
    let canvas = document.getElementById('renderCanvas')

    try {
      engine = this.createDefaultEngine(canvas)
    } catch (e) {
      console.log('the available createEngine function failed. Creating the default engine instead')
      engine = this.createDefaultEngine(canvas)
    }
    if (!engine) throw new Error('engine should not be null.')
    scene = this.createScene(canvas, engine)
    sceneToRender = scene
    engine.runRenderLoop(function () {
      if (sceneToRender) {
        sceneToRender.render()
      }
    })

    // Resize
    window.addEventListener('resize', function () {
      engine.resize()
    })
  }
}
</script>

<style scoped>
    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>
